<template>
  <div class="wrap">
    <div class="header">
      <el-button type="primary">+新增</el-button>
      <el-button type="danger" disabled
        ><i class="el-icon-delete"></i>删除</el-button
      >
    </div>
    <div class="main">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="配置名称" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="调用标签" width="120">
        </el-table-column>
        <el-table-column prop="address" label="内容" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address1" label="操作" class="w2">
          <el-link icon="el-icon-edit">编辑</el-link>
          <el-link icon="el-icon-delete-solid">删除</el-link>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="50"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage1: 1,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [
        {
          date: "站点名称",
          name: "site_name",
          address: "GFAST文章系统",
        },
        {
          date: "首页地址",
          name: "site_url",
          address: "/home",
        },
        {
          date: "站点标题",
          name: "seo_title",
          address: "GFAST文章系统",
        },
        {
          date: "首页关键字",
          name: "seo_keywords",
          address: "GFAST文章系统",
        },
        {
          date: "首页描述",
          name: "seo_description",
          address: "GFAST文章系统",
        },
        {
          date: "站点底部信息",
          name: "site_footer",
          address: "copyright © 2023 云南奇讯科技有限公司",
        },
        {
          date: "主题模板",
          name: "theme_template",
          address: "default",
        },
      ],
      multipleSelection: [],
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss">
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .header {
    width: 100%;
    height: 40px;
  }
  .main {
    margin-top: 10px;
    width: 100%;
    flex: 1;
  }
}
</style>